<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>Tegaki5</title>
		<meta charset="utf-8"/>
		<meta name="description" content="Procedural Drawing Tool"/>
		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<style type="text/css">

		</style>
        <link rel="stylesheet" type="text/css" href="css/colorpicker.css">
        <link rel="stylesheet" type="text/css" href="css/canvas.css">
	</head>
	<body>

        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <!-- Brushes Start -->
        <script type="text/javascript" src="js/brushes/basic.js"></script>
        <!-- Brushes End -->
		<script type="text/javascript" src="js/colorutils.js"></script>
		<script type="text/javascript" src="js/colorselector.js"></script>
		<script type="text/javascript" src="js/palette.js"></script>
		<script type="text/javascript" src="js/menu.js"></script>
		<script type="text/javascript" src="js/about.js"></script>	
		<script type="text/javascript" src="js/main.js"></script>
        <script type="text/javascript" src="js/colorpicker.js"></script>

        <div id="clpicker" style="position:absolute;z-index:5">
            <div class="clpick" style="background-color:#000000;" onclick="eSetColor('000000')"></div>
            <div class="clpick" style="background-color:#333333;" onclick="eSetColor('333333')"></div>
            <div class="clpick" style="background-color:#666666;" onclick="eSetColor('666666')"></div>
            <div class="clpick" style="background-color:#999999;" onclick="eSetColor('999999')"></div>
            <div class="clpick" style="background-color:#cccccc;" onclick="eSetColor('cccccc')"></div>
            <div class="clpick" style="background-color:#ffffff;" onclick="eSetColor('ffffff')"></div>
            <div class="clpick" style="background-color:#ff0000;" onclick="eSetColor('ff0000')"></div>
            <div class="clpick" style="background-color:#00ff00;" onclick="eSetColor('00ff00')"></div>
            <div class="clpick" style="background-color:#0000ff;" onclick="eSetColor('0000ff')"></div>
            <div class="clpick" style="background-color:#ffff00;" onclick="eSetColor('ffff00')"></div>
            <div class="clpick" style="background-color:#00ffff;" onclick="eSetColor('00ffff')"></div>
            <div class="clpick" style="background-color:#ff00ff;" onclick="eSetColor('ff00ff')"></div>

            <div class="lpick" style="width: 1px;" onclick="eSetSize(1)"></div>
            <div class="lpick" style="width: 2px;" onclick="eSetSize(2)"></div>
            <div class="lpick" style="width: 3px;" onclick="eSetSize(3)"></div>
            <div class="lpick" style="width: 7px;" onclick="eSetSize(7)"></div>
            <div class="lpick" style="width: 11px;" onclick="eSetSize(11)"></div>
            <div class="lpick" style="width: 16px;" onclick="eSetSize(16)"></div>
            <div class="lpick" style="width: 25px;" onclick="eSetSize(25)"></div>
        </div>
        <div id="cpickeropacity_side" style="position:absolute;z-index:5">
            <div class="cpick" style="background-color:#ffffff;" onclick="eSetAlpha(0)"></div>
            <div class="cpick" style="background-color:#dddddd;" onclick="eSetAlpha(0.1)"></div>
            <div class="cpick" style="background-color:#cbcbcb;" onclick="eSetAlpha(0.2)"></div>
            <div class="cpick" style="background-color:#aaaaaa;" onclick="eSetAlpha(0.3)"></div>
            <div class="cpick" style="background-color:#999999;" onclick="eSetAlpha(0.4)"></div>
            <div class="cpick" style="background-color:#808080;" onclick="eSetAlpha(0.5)"></div>
            <div class="cpick" style="background-color:#6F6F6F;" onclick="eSetAlpha(0.6)"></div>
            <div class="cpick" style="background-color:#555555;" onclick="eSetAlpha(0.7)"></div>
            <div class="cpick" style="background-color:#3C3C3C;" onclick="eSetAlpha(0.8)"></div>
            <div class="cpick" style="background-color:#222222;" onclick="eSetAlpha(0.9)"></div>
            <div class="cpick" style="background-color:#000000;" onclick="eSetAlpha(1)"></div>
        </div>

        <div id="color" class="gui" onmousedown="core.fu(this.id, event, {fu:core.win, Y1:19, z:true});" style="top: 40px; left: 700px; z-index:5">
            <div class="bounds">
                <div class="TL"></div>
                <div class="TM">
                    <span id="HEX" class="TML" title="HEX"></span>
                    <div class="TRx"><img onclick="win.close('solid',1)" onmousedown="return(noMove())" src="css/media/win_close.png" title="Close" /></div>
                </div>
                <div class="TR"></div><br />
                <div class="ML"></div>
                <div class="MM" onmousedown="noMove()" id="colorMM"></div>
                <div class="MR"></div><br />
                <div class="BL"></div>
                <div class="BM"></div>
                <div class="BR"></div>
            </div>
        </div>
        <script>
                Picker.mk();
                Picker.run('Red');
        </script>
        <form id="imageSubmit" action="/submit" method="post" style="visibility:hidden">
		<div class="form-datauri">
			<input id="imageinput" type="text" class="form-control" name="image">
            <input id="thumbnailinput" type="text" class="form-control" name="thumbnail">
		</div>
		<button type="submit" class="btn btn-warning btn-lg">Save Image</button>
	</form>
    <canvas id="thumbnailCanvas" style="position:absolute; left:800px; top: 300px" width="120px" height="160px"></canvas>
	</body>
</html>
